import React ,{useState, useEffect }from 'react'
import { TabBar } from 'antd-mobile'
import Icon from '../Icon'
import { useNavigate, useLocation, useDispatch, useSelector } from 'umi'
import './style.scss'
export default function index() {
  // useDispatch 此hooks用于调用状态管理集中方法
  const dispatch = useDispatch();
  // useSelector这个hooks用于获取状态管理集中的store中state数据
  const { items, total, number } = useSelector(state => state.cart);
  const getCartMsg = ()=>{
    dispatch({
      type: 'cart/fetchItemInfo'
    })
  }
  useEffect(() => {
    getCartMsg
  }, [])
  const navigate = useNavigate();
  const switchRoute = key => {
    navigate(key)
  }
  return (
    <div className='tabbar-container'>
       <TabBar
          onChange={
            switchRoute
          }
          activeKey={useLocation().pathname}
       >
         <TabBar.Item
          key="/home"
          title={
            (active) => {
              return <span style={{color:active?'#fc5a5a':'#333' }}>首页</span>
            }
          }
          icon={
            (active) => {
              return <Icon name="shouye1" stop={false} size={22} color={active?'#fc5a5a':'#333'}/>
            }
          }
         />
         <TabBar.Item
          key="/cate"
          title={
            (active) => {
              return <span style={{color:active?'#fc5a5a':'#333' }}>分类</span>
            }
          }
          icon={
            (active) => {
              return <Icon name="fenlei" stop={false} size={22} color={active?'#fc5a5a':'#333'}/>
            }
          }
         />
         <TabBar.Item
          badge={number}
          key="/cart"
          title={
            (active) => {
              return <span style={{color:active?'#fc5a5a':'#333' }}>购物车</span>
            }
          }
          icon={
            (active) => {
              return <Icon name="gouwuche1" stop={false} size={22} color={active?'#fc5a5a':'#333'}/>
            }
          }
         />
         <TabBar.Item
          key="/user"
          title={
            (active) => {
              return <span style={{color:active?'#fc5a5a':'#333' }}>我的</span>
            }
          }
          icon={
            (active) => {
              return <Icon name="wode" size={22} stop={false} color={active?'#fc5a5a':'#333'}/>
            }
          }
         />
       </TabBar>
    </div>
  )
}
